<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :lock-scroll="false"
    :close-on-click-modal="false"
    modal-append-to-body
    class="subcribe-common-dialog large-common-dialog-size"
  >
    <el-tabs
      slot="title"
      v-model="curActiveTab"
      :before-leave="() => !listLoading"
      class="dialog-tabs"
      @tab-click="onTabChange">
      <el-tab-pane :name="STOCK_TABS.STOCK_IN" label="入库明细" />
      <el-tab-pane :name="STOCK_TABS.STOCK_OUT" label="出库明细" />
    </el-tabs>
    <el-date-picker
      v-model="rangeDate"
      :picker-options="pickerOptions()"
      format="yyyy/MM/dd"
      type="daterange"
      size="small"
      align="right"
      unlink-panels
      class="data-picker-box"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="queryInventoryDetail(true)"/>
    <div class="flex-center">
      <div class="table-sub-title">
        <img :src="gcIcon" alt="共创平台">共创平台
      </div>
      <div class="table-sub-title">
        <img :src="tpIcon" alt="第三方库存">第三方库存
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="inventoryData.items"
      header-cell-class-name="dynamic-edit-table-cell"
      class="fb-table"
      empty-text="暂无数据"
      max-height="450px"
      border
      fit>
      <template v-for="column in tableHeaderList">
        <el-table-column :label="column.label" :key="column.key" :width="column.width">
          <template slot-scope="scope">
            <!--时间相关-->
            <template v-if="column.key.endsWith('Time')">
              <div v-if="scope.row[column.key]">
                {{ scope.row[column.key] | standardFormatTime('YYYY/MM/DD HH:mm:ss') }}
              </div>
              <span v-else>--</span>
            </template>
            <!--数量相关-->
            <template v-else-if="column.key.endsWith('Quantity')">
              <div>{{ scope.row[column.key] | filterNon }}</div>
            </template>
            <template v-else>
              <ToolTip :content="scope.row[column.key]" />
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div style="display:flex;justify-content:flex-end;">
      <el-pagination
        :current-page="page"
        :page-size="perPage"
        :total="inventoryData.total"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
import gcIcon from '@/assets/mengli/inventory/gc_icon.png';
import tpIcon from '@/assets/mengli/inventory/tp_icon.png';
import { getStockDetail } from '@/api/mengli';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { pickerOptions } from '../../utils';
import { standardFormatTime } from '@/filters/date';
import { filterNon } from '@/filters';

export default {
  components: {
    DialogTitle
  },
  filters: {
    standardFormatTime,
    filterNon
  },
  props: {
    inventoryDetail: {
      type: String | Number,
      default: null
    },
    comparisonRangeDate: {
      type: Array,
      default: () => []
    },
    id: {
      type: Number | String,
      default: ''
    }
  },
  data() {
    return {
      gcIcon,
      tpIcon,
      dialogVisible: false,
      isStockIn: true,
      page: 1,
      perPage: 10,
      listLoading: false,
      curActiveTab: '1',
      rangeDate: null,
      inventoryData: {
        items: [],
        total: 0,
        page: 1,
        perPage: 10
      }
    };
  },
  computed: {
    STOCK_TABS() {
      return {
        STOCK_IN: '1',
        STOCK_OUT: '0'
      };
    },
    tableHeaderList() {
      if (this.curActiveTab === this.STOCK_TABS.STOCK_IN) {
        return [
          { label: '入库单单号', key: 'gcOrderNum' },
          { label: '入库商品数量', key: 'gcProductQuantity', width: 120 },
          { label: '入库时间', key: 'gcTime', width: 160 },
          { label: '入库单单号', key: 'tpOrderNum' },
          { label: '入库商品数量', key: 'tpProductQuantity', width: 120 },
          { label: '入库时间', key: 'tpTime', width: 160 }
        ];
      } else {
        return [
          { label: '已发货订单号', key: 'gcOrderNum' },
          { label: '出库商品数量', key: 'gcProductQuantity', width: 120 },
          { label: '出库时间', key: 'gcTime', width: 160 },
          { label: '已发货订单号', key: 'tpOrderNum' },
          { label: '出库商品数量', key: 'tpProductQuantity', width: 120 },
          { label: '出库时间', key: 'tpTime', width: 160 }
        ];
      }
    },
    rangeKeyArr() {
      return [{
        attr: 'rangeDate',
        start: 'startTime',
        end: 'endTime',
        type: 'time'
      }];
    }
  },
  methods: {
    pickerOptions,
    getCurrentMonth() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      const start = new Date(year, month, 1, 0, 0, 0);
      const end = new Date(new Date(year, month + 1, 1).setHours(0, 0, 0, 0) - 1);
      return [start, end];
    },
    queryInventoryDetail(reset = false) {
      if (reset) this.page = 1;
      this.listLoading = true;
      const params = {
        page: this.page,
        perPage: this.perPage
      };
      params.type = this.curActiveTab === this.STOCK_TABS.STOCK_IN ? 0 : 1;
      params.id = this.id;
      params.rangeDate = this.rangeDate;
      paramsRangeFormat(this.rangeKeyArr, params);
      getStockDetail(params).then(res => {
        this.inventoryData = res.data;
        this.listLoading = false;
      }).catch(_ => {
        this.listLoading = false;
        const list = [];
        const num = params.type === 0 ? 10 : 5;
        for (let i = 0; i < num; i++) {
          list.push({ gcOrderNum: 5 + i, tpProductQuantity: 80 - i });
        }
        this.inventoryData.total = num;
        this.inventoryData.list = list;
      });
    },
    onTabChange() {
      !this.listLoading && this.queryInventoryDetail(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.queryInventoryDetail(true);
    },

    handleCurrentChange(toPage) {
      this.page = toPage;
      this.queryInventoryDetail();
    },
    showDialog(isStockIn) {
      this.dialogVisible = true;
      this.curActiveTab = isStockIn ? this.STOCK_TABS.STOCK_IN : this.STOCK_TABS.STOCK_OUT;
      this.rangeDate = this.comparisonRangeDate;
      this.$nextTick(() => {
        this.queryInventoryDetail(true);
      });
    },
    handleDialogClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-top: 0 !important;
}
::v-deep .el-date-editor {
  width: 260px;
  .el-range-editor--small .el-range-input {
    font-size: 14px;
  }
}
::v-deep .el-range-separator {
  width: 22px;
}
::v-deep .el-table__body td.el-table__cell {
  padding: 8px 0;
}
.dialog-tabs {
  padding-left: 24px;
  padding-top: 10px;
  height: 56px;
  user-select: none;
  &::v-deep {
    .el-tabs__header {
      .el-tabs__active-bar {
        display: none;
      }
      .el-tabs__nav-wrap::after {
        display: none;
      }
    }
    .el-tabs__item {
      font-size: 16px;
    }
  }
}
.data-picker-box {
  position: absolute;
  top: 16px;
  right: 24px;
}
.table-sub-title {
  flex: 1;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  > img {
    width: 22px;
    height: 22px;
    margin-right: 4px;
  }
}
</style>
